<template>
  <div class="full" :style="{ color: item.color }">
    <img :src="item.src" alt="" />
    <span class="name">{{ item.name }}</span>
    <span class="text-2xl">{{ item.value.toLocaleString() }}</span>
  </div>
</template>
<script setup>
defineProps({
  item: Object,
})
</script>
<style lang="postcss" scoped>
.full {
  display: grid;
  grid:
    'img' 90px
    'name' 30px
    'value' 30px
    / auto;
  justify-items: center;
  align-items: center;
}
img {
  height: 80px;
  margin-top: 20px;
}
.name {
  margin-top: 10px;
}
</style>
